﻿<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/modernizr.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.3.1.min.js">		
</script>
</head>

<body>
	<%@ include file="../pub/topbar-back.jsp"%> 
	<div class="container clearfix">
		<%@ include file="../pub/sidebar-back.jsp"%> 
		<!--/sidebar-->
		<div class="main-wrap">

			<div class="crumb-wrap">
				<div class="crumb-list">
					<i class="icon-font"></i> <a href="index.jsp">首页</a><span
						class="crumb-step">&gt;</span><span class="crumb-name">员工列表</span>
				</div>
			</div>
			<div class="search-wrap">
				<div class="search-content">
					<form action="#" method="post">
						<table class="search-tab">
							<tr>
								<th width="120">选择分类:</th>
								<td><select name="search-sort" id="">
										<option value="">全部</option>
										<option value="19">技术部</option>
										<option value="20">商务部</option>
								</select></td>
								<th width="70">关键字:</th>
								<td><input class="common-text" placeholder="关键字"
									name="keywords" value="" id="" type="text"></td>
								<td><input class="btn btn-primary btn2" name="sub"
									value="查询" type="submit"></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<div class="result-wrap">
				<form name="myform" id="myform" method="post">
					<div class="result-title">
						<div class="result-list">
							<a href=emp-input><i class="icon-font"></i>增加员工信息</a> <a
								id="batchDel" href="javascript:void(0)"><i class="icon-font"></i>批量删除</a>
							<a id="updateOrd" href="javascript:void(0)"><i
								class="icon-font"></i>更新排序</a>
						</div>
					</div>
					<div class="result-content">
						<c:choose>
							<c:when test="${pageBean.data eq null}">
									没有任何员工信息
								</c:when>
							<c:when test="${fn:length(pageBean.data) eq 0}">
									没有任何员工信息
								</c:when>
							<c:otherwise>
								<table id="empTable" class="result-tab" width="100%">
									<!--头部 样式-->
									<thead>
										<tr>
											<th class="tc" width="5%"><input id="selectall"
												class="" name="selectall" type="checkbox"></th>
											<th>ID</th>
											<th>姓名</th>
											<th>EMAIL</th>
											<th>生日</th>
											<th>创建时间</th>
											<th>部门</th>
											<th colspan="2">操作</th>
										</tr>
									</thead>
									<!--中部 显示-->
									<tbody id="show">
										<c:forEach items="${pageBean.data}" var="employee" varStatus="employeeStatus">
											<tr>
												<td class="tc"><input type="checkbox" id="temp"
													value="${employee.id}" name="check"
													></td>
												<td>${employee.id}</td>
												<td>${employee.employeeName}</td>
												<td>${employee.employeeEmail}</td>
												<td><fmt:formatDate
														value="${employee.employeeBirthday}" pattern="yyyy-MM-dd" />
												</td>
												<td><fmt:formatDate value="${employee.createTime}"
														pattern="yyyy-MM-dd hh:mm:ss" /></td>
												<td>${employee.department.departmentName}</td>
												<td><a class="delete"
													href="emp-delete?id=${employee.id}">删除</a> <input
													type="hidden" value="${employee.employeeName}"></td>
												<td><a href="emp-input?id=${employee.id}">编辑</a></td>
											</tr>
										</c:forEach>
									</tbody>
									<tfoot id="empTable">
										<td colspan="9" align="center"><a
											href="emp-list?pageNo=${pageBean.firstPage}">首页</a> <a
											href="emp-list?pageNo=${pageBean.prePage}">上一页</a>
											当前第${pageBean.pageNo},&nbsp;共${pageBean.lastPage}&nbsp;页 <a
											href="emp-list?pageNo=${pageBean.nextPage}">下一页</a> <a
											href="emp-list?pageNo=${pageBean.lastPage}">末页</a></td>
									</tfoot>
								</table>
							</c:otherwise>
						</c:choose>
					</div>
				</form>
			</div>
		</div>
		<!--/main-->
	</div>
	<!-- script代码 -->
	<script type="text/javascript">
		$(document).ready(function() {
			$(document).on("click", ".delete", function() {
				var employeeName = $(this).next(":hidden").val();
				var flag = confirm("确定要删除" + employeeName + "的信息吗?");
				if (flag) {
					var $tr = $(this).parent().parent();
					//删除，使用 ajax 的方式
					var url = this.href;
					$.ajax({
						url : url,
						dataType : "json",
						type : "post",
						success : function(data) {
							//若data的返回值为true，则提示删除成功，且把当前行删除
	
							if (data.status) {
								var $this = $("#empTable tbody");
								$this.html("");
								$.each(data.pageBean.data, function(index, obj) {
									var tr = "<tr>";
									tr = tr + "<td class='tc'>" + "<input type='checkbox'>" + "</td>";
									tr = tr + "<td>" + obj.id + "</td>";
									tr = tr + "<td>" + obj.employeeName + "</td>";
									tr = tr + "<td>" + obj.employeeEmail + "</td>";
									tr = tr + "<td>" + obj.employeeBirthday.substring(0, obj.employeeBirthday.indexOf("T")) + "</td>";
									tr = tr + "<td>" + obj.createTime.replace("T", " ") + "</td>";
									tr = tr + "<td>" + obj.department.departmentName + "</td>";
									tr = tr + "<td><a href='emp-delete?id=" + obj.id + "&pageNo=" + data.pageBean.pageNo + "'class='delete'>删除</a><input type='hidden' value='" + obj.employeeName + "'/></td>"
									tr = tr + "<td><a href='emp-input?id=" + obj.id + "'>编辑</a></td>";
									tr = tr + "</tr>"
									$("#empTable tbody").append(tr);
	
								/* console.log(obj); */
								});
	
								$("#empTable tfoot").html("");
								tr = "<tr><td colspan='9' align='center'>";
								tr = tr + "&nbsp;<a href='emp-list?pageNo=" + data.pageBean.firstPage + "'>首页</a>&nbsp;";
								tr = tr + "<a href='emp-list?pageNo=" + data.pageBean.prePage + "'>上一页</a>&nbsp;";
								tr = tr + "当前第 "+data.pageBean.pageNo+"页,&nbsp;共"+data.pageBean.lastPage+"页&nbsp;";
								tr = tr + "<a href='emp-list?pageNo=" + data.pageBean.nextPage + "'>下一页</a>&nbsp;";
								tr = tr + "<a href='emp-list?pageNo=" + data.pageBean.lastPage + "'>末页</a>&nbsp;";
								$("#empTable tfoot").append(tr);
								alert("删除成功!");
							} else {
								//若data的返回值为false，提示删除失败
								alert("删除失败!");
							}
						}
					});
				}
				//取消超链接的默认行为
				return false;
	
			});
		});
	</script>
	<script type="text/javascript">
		$(function() {
			$("#selectall").click(function() {
				if (this.checked == true) {
					$("input#temp").prop("checked", true);
				} else {
					$("input#temp").prop("checked", false);
				}
			});
		}); 
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#batchDel").click(function() {
				var msg = "您真的确定要删除全部吗？";
				if (confirm(msg) == true) {
					var allcheckbox = "";
					$("input[name=check]:checked").each(function() { //遍历table里的全部checkbox
						allcheckbox += $(this).val() + ","; //获取所有checkbox的值
						console.log(allcheckbox);
					});
					  if(allcheckbox.length > 0) //如果获取到
                allcheckbox = allcheckbox.substring(0, allcheckbox.length - 1); //把最后一个逗号去掉
                 window.location = "emp-deleteAll?checkTnum="+allcheckbox;
       				 }else{   
      			  return false;   
				}  
			
			});
		});
	</script>
	
	
</body>

</html>